<template>
    <div>
        <div ref="Pie" id="pie" class="pie" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array<any>,
        default: false
    }
});
let myChart: any = null
const resizeDom = ref()
const resizeEle = ref()

watch(() => props.chartData, async val => {
    if (val) {
        initChart()
    }
}, { deep: true })

let category = [
    "食品",
    "酒茶",
    "箱包",
    "百货",
    "服装",
    "鞋帽",
];


const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const initChart = () => {
    // 新增商品
    let salesData = props.chartData.map((item, index) => {
        return {
            value: item,
            itemStyle: {
                color: index % 2 == 0 ? '#2CAB40' : '#86DF6C',
                barBorderRadius: 3
            }
        }
    })
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.9)",
            formatter: function (prams: any) {
                let str = `新增商品：<br/>`
                prams.map((item: any) => {

                    str += item.marker + ' ' + item.axisValueLabel + '：' + item.value + '个<br/>'
                })
                return str;
            },
            axisPointer: {
                type: "shadow",
                label: {
                    show: true,
                    backgroundColor: "#7B7DDC",
                },
            },
        },
        legend: {
            show: false,
        },
        grid: {
            top: "15%",
            left: "0%",
            right: "5%",
            bottom: "30%",
        },
        xAxis: {
            data: category,
            axisLine: {
                show: false // 隐藏轴线
            },
            axisLabel: {
                show: true // 显示标签
            },
            axisTick: {
                show: false,
            },
        },

        yAxis: [
            {
                show: false,
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    },
                },
                axisLabel: {
                    formatter: "{value} ",
                },
            },
        ],

        series: [
            {
                itemStyle: {
                    color: '#febc5d'
                },
                name: "新增商品",
                type: "bar",
                // barGap: "-100%",
                barWidth: 15,
                // z: -12,
                data: salesData,
            },
        ],
    };
    option && myChart.setOption(option);
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
    resizeDom.value = document.getElementById('pie')
    resizeEle.value = new ResizeObserver((entries) => {
        myChart.resize()
    })
    resizeEle.value.observe(resizeDom.value as HTMLElement)
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    resizeEle.value.disconnect(resizeDom.value)
})



</script>

<style scoped lang="scss">
.pie {
    width: 100%;
    height: 100%
}
</style>